import React, { useState, forwardRef, useImperativeHandle } from "react";
import {
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  DatePicker,
  DatePicker,
  message,
} from "antd";

import dayjs from "dayjs";

let curRowId = "";

const ShowPopComp = forwardRef((props, ref) => {
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);

  // 打开弹框
  const showModal = (row) => {
    form.resetFields();
    if (row) {
      curRowId = row.id;
      row.briary = dayjs(row.briary);
      form.setFieldsValue(row);
    }
    setOpen(true);
  };

  const handleOk = () => {
    form
      .validateFields()
      .then((res) => {
        res.briary = dayjs(res.briary).format("YYYY-MM-DD");
        res.id = curRowId ? curRowId : String(new Date().getTime());
        // ajax请求
        // message.success(11111);
        props.onPopOk(res, curRowId);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const handleCancel = () => {
    setOpen(false);
  };

  useImperativeHandle(ref, () => {
    return {
      showModal,
      handleCancel,
    };
  });

  return (
    <>
      <Modal
        title={props.mode === "edit" ? "编辑" : "新增"}
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form name="basic" form={form}>
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: "请输入姓名!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: "请输入年龄!",
              },
              {
                required: true,
                pattern: /\d/,
                message: "格式不正确，请重新输!",
              },
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: "性别不能为空",
              },
            ]}
          >
            <Select
              options={[
                {
                  value: 0,
                  label: "男",
                },
                {
                  value: 1,
                  label: "女",
                },
              ]}
            />
          </Form.Item>

          <Form.Item
            label="出生日期"
            name="briary"
            rules={[
              {
                required: true,
                message: "出生日期不能为空",
              },
            ]}
          >
            <DatePicker />
          </Form.Item>
          <Form.Item
            label="地址"
            name="address"
            rules={[
              {
                required: true,
                message: "地址不能为空",
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
});
export default ShowPopComp;
